<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { busListStore, useMemberStore } from '@/stores'
import type { userItem } from '@/types/member'
import { getBusinessCashApproveAmountAPI, postBusinessCashApproveAPI } from '@/api/business'
import { baseURL } from '@/utils/http'
import defauleAv from '@/static/images/default-img.jpg'

const drawalValue = ref('')

const busStore = busListStore()
const memberStore = useMemberStore()
const profile = memberStore.profile

const businessInfo = busStore.busList[0]

// 待提现金额
const cashAmout = ref<string>()
const getBusinessCashAmount = async () => {
  if (busStore.busList.length>0) {
    const res = await getBusinessCashApproveAmountAPI(busStore.busList[0].appUserId)
    cashAmout.value = res.data as string
  }
}

onMounted(async () => {
  getBusinessCashAmount()
  if (profile.avatar?.includes('http')) {
    console.log(profile)
  } else {
    profile.avatar = baseURL + profile.avatar
    console.log(profile)
  }
})

const drawaAll = () => {
  drawalValue.value = cashAmout.value as string
}

// 发起提现
const drawalHeadel = async () => {
  if (memberStore.profile.userId && memberStore.profile.wxOpenid) {
    if (drawalValue.value != '') {
      if (cashAmout.value && drawalValue.value <= cashAmout.value) {
        if (drawalValue.value > '0' && drawalValue.value <= '200') {
          let obj = {
            userId: memberStore.profile.userId,
            cashPrice: drawalValue.value,
          }
          const res = await postBusinessCashApproveAPI(
            obj.userId,
            obj.cashPrice,
            memberStore.profile.wxOpenid,
          )
          drawalValue.value = ''
          uni.showToast({ icon: 'none', title: res.data as string })
        } else {
          uni.showToast({ icon: 'none', title: '提现金额必须小于200元' })
        }
      } else {
        uni.showToast({ icon: 'none', title: '提现金额不能大于账户金额' })
      }
    } else {
      uni.showToast({ icon: 'fail', title: '请输入提现金额' })
    }
  } else {
    uni.showToast({ icon: 'fail', title: '请登录！' })
  }
}
</script>

<template>
  <view class="viewport">
    <view class="profile">
      <image class="avatar" mode="aspectFill" v-if="profile.avatar" :src="profile.avatar"></image>
      <image class="avatar" :src="defauleAv" mode="scaleToFill" v-else />
      <view class="nick_name">{{ profile.nickname?profile.nickname:profile.username }}</view>
    </view>
    <view class="drawal">
      <view class="title">提现金额</view>
      <view class="drawal_input">
        <text>¥</text>
        <uni-easyinput v-model="drawalValue" placeholder="请输入" />
      </view>
      <view class="note">
        <view class="top">当前可提现金额为：<text>{{ Number(cashAmout).toFixed(2) }}</text>元，</view>
        <view class="all_take" @tap="drawaAll">全部提现</view>
      </view>
      <view class="waring">提现到当前微信登陆账号，请注意到账查收</view>
    </view>
    <view class="btn">
      <button
        type="primary"
        style="color: #ffffff; backgroundcolor: #27ba9b; bordercolor: #27ba9b"
        size="default"
        @tap="drawalHeadel"
      >
        提现
      </button>
    </view>
    <view class="some">
      <text>提现单笔最低限额为0.3元;</text>
      <text>当日最大提现金额为200元，大于200元分多日提现即可;</text>
      <text>由暖城乐促钱包提现至登录微信钱包及银行卡等涉及到的手续费由中奖者自行承担。</text>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #fff;
}
.viewport {
  margin: 10px;
}
.profile {
  background-color: #fff;
  padding: 10px 10px 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  image {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-right: 15px;
  }
}

.btn {
  padding: 20px;
  width: 100%;
  button {
    font-size: 16px;
    line-height: 2.6;
    width: 250px;
  }
}

.drawal {
  padding: 10px;
  .title {
    font-size: 30rpx;
    color: #333;
  }
  .drawal_input {
    display: flex;
    align-items: center;
    margin: 10px 0;

    text {
      font-size: 20px;
      color: #333;
      margin-right: 10px;
    }
  }

  .note {
    display: flex;
    align-items: center;

    .top {
      font-size: 14px;
      color: #666;
      text {
        color: #27ba9b;
        font-size: 16px;
      }
    }
    .all_take {
      margin: 5px 0;
      color: #27ba9b;
      font-weight: bold;
    }
  }

  .waring {
    font-size: 24rpx;
    color: #999;
  }
}

.some {
  display: flex;
  flex-direction: column;
  line-height: 2em;
  font-size: 14px;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>
